<template>
  <el-dialog title="分配歌单" :visible.sync="visiable" width="500px" :before-close="handleClose">
    <el-form ref="formData" :model="formData" label-width="100px" label-position="right" style="width:400px;" status-icon>
      <el-form-item label="歌曲名:" prop="songName" >
        <el-input v-model="formData.songName" ></el-input>
      </el-form-item>
      <el-form-item label="歌单:" prop="songListIds">
        <template>
          <el-checkbox-group v-model="formData.songListIds" @change="changeCheckBox">
            <el-checkbox v-for="(songList,index) in allSongList" :label="songList.id" :key="index">{{songList.name}}</el-checkbox>
          </el-checkbox-group>
        </template>
      </el-form-item>
      <el-form-item align="center">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="handleClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import musicApi from '@/api/music';
export default {
  props:{
    id: null,
    visiable:{  // 弹出窗口
      type:Boolean,
      default:false
    },
    remoteClose: Function, //用于关闭窗口
  },

  data() {
    return {
      formData: {
        songListIds: [],
        songName: '',
        songId: ''
      },
      allSongList: [], // 所有的歌单
    }
  },

  watch: {
    // 监听visiable的变化 将改变之后的值传入
    visiable(val) {
      if(val) {
        this.formData.songId = this.id;
        this.fetchData();
        this.fetchAllSongList();
      }
    },
  },

  methods: {
    // 提交
    submit() {
      musicApi.handleSongList(this.formData).then(response => {
        if (response.code === 200) {
          this.$notify({
            title: '成功',
            message: '分配成功',
            type: 'success',
            duration: 1500
          });
        } else if (response.code === 306) {
          this.$notify.error({
            title: '错误',
            message: '您没有操作权限，请联系管理员',
            duration: 1500
          });
        } else {
          this.$notify.error({
            title: '错误',
            message: '系统异常，请稍后再试',
            duration: 1500
          });
        }
        // 刷新列表
        this.handleClose();
      })
    },

    changeCheckBox(val) {
      // alert(val)
      this.formData.songListIds = val;
    },

    // 获取所有的歌单
    fetchAllSongList() {
      const data = {
        current: 1, size: 20
      }
      musicApi.getAllSongList(data).then(response => {
        if (response.code === 200) {
          this.allSongList = response.data.list;
        }
      })
    },

    // 根绝歌曲id查询歌曲信息及歌曲的所在歌单信息
    fetchData() {
      musicApi.getSongAndSongListBySongId(this.id).then(response => {
        if (response.code === 200) {
          this.formData.songName = response.data.songName;
          this.formData.songListIds = response.data.ids;
        }
      })
    },

    // 关闭窗口
    handleClose() {
      // 将表单清空
      this.$refs['formData'].resetFields();
      // 调用父组件的方法关闭窗口
      this.remoteClose();
    },
  }
}
</script>

<style scoped>

</style>
